<template>
  <div>
    <page-header title="基础设置">
      <n-button type="primary" @click.stop="handleUpdateSetting">保存</n-button>
    </page-header>
    <div class="mt-[16px]">
      <n-card title="公司信息">
        <n-form ref="formRef">
          <n-grid :cols="24" :x-gap="10">
            <n-gi :span="24">
              <n-form-item label="公司名称" path="companyName">
                <n-input v-model:value="companyProfile.companyName" />
              </n-form-item>
            </n-gi>
            <n-gi :span="24">
              <n-form-item label="公司地址" path="address">
                <n-input v-model:value="companyProfile.address" />
              </n-form-item>
            </n-gi>
            <n-gi :span="8">
              <n-form-item label="联系人" path="contactName">
                <n-input v-model:value="companyProfile.contactName" />
              </n-form-item>
            </n-gi>
            <n-gi :span="8">
              <n-form-item label="联系电话" path="contactPhone">
                <n-input v-model:value="companyProfile.contactPhone" />
              </n-form-item>
            </n-gi>
            <n-gi :span="8">
              <n-form-item label="联系邮箱" path="contactEmail">
                <n-input v-model:value="companyProfile.contactEmail" />
              </n-form-item>
            </n-gi>
          </n-grid>
        </n-form>
      </n-card>
      <div class="mt-[10px]"></div>
      <n-card title="条款设置">
        <n-form ref="formRef">
          <n-grid :cols="24" :x-gap="10">
            <n-gi :span="12">
              <n-form-item label="设备回收条款">
                <n-input type="textarea" v-model:value="tradeInTerm" />
              </n-form-item>
            </n-gi>
            <n-gi :span="12">
              <n-form-item label="维修条款">
                <n-input type="textarea" v-model:value="repairTerm" />
              </n-form-item>
            </n-gi>
          </n-grid>
        </n-form>
      </n-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { get } from "lodash-es";
import {
  getCompanySetting,
  setCompanySetting,
  getTermsSettings,
  setTermsSettings,
} from "@/api/settings/settings.api";
import { TERM_TYPE } from "@/constants/terms";

const companyProfile = reactive({
  companyName: "",
  address: "",
  contactName: "",
  contactPhone: "",
  contactEmail: "",
});

const tradeInTerm = ref<string>("");

const repairTerm = ref<string>("");

const handleGetCompanySetting = async () => {
  const result = await getCompanySetting();
  const _companySettings = get(result, "result") || {};
  companyProfile.companyName = _companySettings.companyName;
  companyProfile.address = _companySettings.address;
  companyProfile.contactName = _companySettings.contactName;
  companyProfile.contactPhone = _companySettings.contactPhone;
  companyProfile.contactEmail = _companySettings.contactEmail;
};

const handleGetTermSetting = async () => {
  const result = await getTermsSettings();
  console.log(result);
  const _termsSettings = get(result, "result") || [];
  if (_termsSettings.length) {
    tradeInTerm.value = _termsSettings.find(
      (item: any) => item.type === TERM_TYPE.TRADE_IN
    )?.content;
    repairTerm.value = _termsSettings.find(
      (item: any) => item.type === TERM_TYPE.REPAIR
    )?.content;
  }
};

const handleUpdateTerms = async () => {
  const termsList = [
    {
      type: TERM_TYPE.TRADE_IN,
      content: tradeInTerm.value,
    },
    {
      type: TERM_TYPE.REPAIR,
      content: repairTerm.value,
    },
  ];

  const params = {
    terms: termsList,
  };

  await setTermsSettings(params);
};

const handleUpdateSetting = async () => {
  await setCompanySetting(companyProfile);
  await handleUpdateTerms();
};

const init = () => {
  handleGetCompanySetting();
  handleGetTermSetting();
};

onMounted(() => {
  init();
});
</script>
